<template>
    <div class="workbench-box">
        <div class="workbench-box-title">
            <div>早上好!Daisy</div>
        </div>

        <div class="workbench-box-head">
            <el-card v-for="(item, index) in workbenchHead" :key="index">
                <template class="workbench-box-head-card">
                    <div class="workbench-box-head-card-img" :style="{ backgroundColor: getBackgroundColor(index) }">
                        <el-icon>
                            <component :is="item.icon" style="color: white;">
                            </component>
                        </el-icon>
                    </div>
                    <div class="workbench-box-head-card-content">
                        <div class="workbench-box-head-card-content-title">
                            {{ item.title }}
                        </div>
                        <div class="workbench-box-head-card-content-num" :style="{ color: getColor(index) }">
                            {{ item.num }}
                        </div>
                    </div>
                </template>
            </el-card>
        </div>
        <div class="workbench-box-echarts">
            <div class="workbench-box-echarts-left">
                <dataProfileEcharts></dataProfileEcharts>
            </div>
            <div class="workbench-box-echarts-right">
                <waitDo></waitDo>
            </div>
        </div>
        <div class="workbench-box-middle">
            <div>
                <peopleLabel :msg="totalNum"></peopleLabel>
            </div>
            <div>
                <peopleAbnormal></peopleAbnormal>
            </div>
        </div>
        <div>
            <weekContract></weekContract>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import api from '@/api'
import '@/assets/adong/workbench.scss'
import dataProfileEcharts from '@/components/dataProfileEcharts.vue'
// import WorkbenchType from '../../types/adong/workbench.ts'
import waitDo from '@/components/waitDo.vue'
import peopleLabel from '@/components/peopleLabel.vue'
import peopleAbnormal from '@/components/peopleAbnormal.vue'
import weekContract from '@/components/weekContract.vue'

const getWorkbenchList = async () => {
    const result = await api.workbench.getWorkbenchDataApi()
    // console.log('getWorkbenchDataApi', result.data.data)
    workbenchHead.value[0].num = result.data.data.total
    workbenchHead.value[1].num = result.data.data.signCount
    workbenchHead.value[2].num = result.data.data.serviceCount
    workbenchHead.value[3].num = result.data.data.finishService

    workbenchHead.value.forEach((item: any) => {
        if (item.title === '居民总数量') {
            // console.log('totalnum', item.num);
            totalNum.value = item.num
        }
    })
}


//获取总数
let totalNum = ref<any>(0)

const workbenchHead = ref([
    {
        title: '居民总数量',
        num: 0,
        icon: 'Document'
    },
    {
        title: '签约居民数量',
        num: 0,
        icon: 'UserFilled'
    },
    {
        title: '待处理服务量',
        num: 0,
        icon: 'HelpFilled'
    },
    {
        title: '已完成服务量',
        num: 0,
        icon: 'Histogram'
    },
]);

const getBackgroundColor = (index: number) => {
    switch (index) {
        case 0:
            return "#2984f8"
        case 1:
            return "#28d094"
        case 2:
            return "#ffc71c"
        case 3:
            return "#ff6262"
    }
};

const getColor = (index: number) => {
    switch (index) {
        case 0:
            return "#2984f8"
        case 1:
            return "#28d094"
        case 2:
            return "#ffc71c"
        case 3:
            return "#ff6262"
    }
};



getWorkbenchList()


</script>

<style lang='scss' scoped></style>